导航菜单
首页 >  How to set up the picture elements card in  > Styling elements in Picture elements card: a small tutorial

Styling elements in Picture elements card: a small tutorial

Hi, may I ask for some help. disclaimer: I may not ask what I want in the correct way but give me a chance.

I would like to have a picture elements card on a dashboard. I want something like a picture elements card with my satellite house view where I can add squares with the accompanied colors.

Something like this:

imageimage1185×627 8.33 KB

I have asked for some help on another thread and think I am half way but do not know how to get that sensor to output colors in my card.

my template sensor:

- sensor: - name: PV With Colorstate: "{{ states('sensor.pvpower') }}"device_class: powerunit_of_measurement: Wattributes:color: >- {%- macro interpolate(value, start, stop) -%}{%- set (start_value, start_color) = start -%}{%- set (stop_value, stop_color) = stop -%}{%- set (start_r, start_g, start_b) = (int(start_color[0:2], base=16), int(start_color[2:4], base=16), int(start_color[4:6], base=16)) -%}{%- set (stop_r, stop_g, stop_b) = (int(stop_color[0:2], base=16), int(stop_color[2:4], base=16), int(stop_color[4:6], base=16)) -%}{%- set s = ((value - start_value)/(stop_value - start_value)) -%}{# some channels might be negative; most browsers are probably tolerant, but in case not #}{%- set r = max(int(start_r + s*(stop_r - start_r)), 0) -%}{%- set g = max(int(start_g + s*(stop_g - start_g)), 0) -%}{%- set b = max(int(start_b + s*(stop_b - start_b)), 0) -%}rgb({{ r }}, {{ g }}, {{ b }}); {%- endmacro -%} {%- set value = states('sensor.pvpower') | float(0) -%} {%- set value_map = {50: "3498db",125: "70a03c",200: "ff9800",275: "e74c3c" } -%} {%- set keys = value_map | sort -%} {%- set index = keys | select("lt", value) | list | length -%} {%- if index == 0 -%}#{{ value_map[keys | first] }} {%- elif index == keys | length -%}#{{ value_map[keys | last] }} {%- else -%}{%- set start = (keys[index - 1], value_map[keys[index - 1]]) -%}{%- set stop = (keys[index], value_map[keys[index]]) -%}{{ interpolate(value, start, stop) }} {%- endif -%}

Things I tried:

imageimage1498×1056 148 KB

Or this:

imageimage1482×1045 154 KB

Can you please help me out to get an entity with a meaningful icon/something to display the color on a picture elements card.

The end goal is to create a PV solar heatmap and see how my panels are performing.

相关推荐: